<template>
    <div class='content'>
        <div class="profile_page">
                <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
        </div>
         <div class="flex menuContain flex-warp">
            <menu-item v-for='(menuData,key) in menuDatas' :key="key" :img-src='menuData.imgSrc' :link-url="menuData.linkUrl" :menu-title='menuData.menuTitle'> </menu-item>
        </div>
    </div>
</template>

<script>
    import headTop from '@/components/header/head'
    import menuItem from '@/components/menuChang/menuChang'
    export default {
    	data(){
            return{
                profiletitle:'变更事由',
                goBack:true,
                 menuDatas:[
                {
                    imgSrc:require('@/assets/images/img/qingjia.png'),
                    menuTitle:'请假',
                    linkUrl:'/leave',
                },
                {
                    imgSrc:require('@/assets/images/img/waichu.png'),
                    menuTitle:'外出',
                    linkUrl:'/goOut'
                },
                {
                    imgSrc:require('@/assets/images/img/chucha.png'),
                    menuTitle:'出差',
                     linkUrl:'/evection'
                },
                {
                    imgSrc:require('@/assets/images/img/wangdaka.png'),
                    menuTitle:'忘打卡',
                    linkUrl:'/forgetClock'
                },
                {
                    imgSrc:require('@/assets/images/img/tiaoban.png'),
                    menuTitle:'调班',
                    linkUrl:'/shift'
                },
                {
                    imgSrc:require('@/assets/images/img/tiaoxiu.png'),
                    menuTitle:'调休',
                    linkUrl:'/rest'
                },
                {
                    imgSrc:require('@/assets/images/img/jiaban.png'),
                    menuTitle:'加班',
                    linkUrl:'/overtime'
                }
            ]
            }
        },
        mounted(){
        },
        components:{
            headTop,
            menuItem
        },
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
    @import '../../assets/style/public';
    .menuContain{
        padding: .4rem;
        .menuItem{
            width: 50%;
            margin-bottom: .4rem;
            &:nth-of-type(odd){
                padding-right: .2rem;
                box-sizing: border-box;
            }
            &:nth-of-type(even){
                padding-left: .2rem;
                box-sizing: border-box;
            }
        }
    }
</style>
